<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				margin: 0;
				text-align: center;
			}
			.header{
				width: 100vw;
				height: 50px;
				background: #2d3a4b;
			}
			.nav{
				height: 200px;
				width: 960px;
				background: #50DD14;
				margin: 8px auto;
			}
			.content{
				width: 960px;
				display: flex;
				justify-content: space-around;
				margin: 0 auto;
				border: 1px solid red;
			}
			.content1{
				height: 400px;
				width: 100px;
				background: #ff0000;
				display: flex;
			}
			.content2{
				height: 400px;
				width: 100px;
				background: #0000ff;
			}
			.content3{
				height: 400px;
				width: 100px;
				background: #222;
			}
			.content4{
				height: 400px;
				width: 100px;
				background: #fc3;
			}
			
			.container{
				width: 960px;
				height: 50px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;
				color: #fff;
			}
			.leftContent{
				width: 320px;
				display: flex;
				justify-content: space-between;
			}
			.rightContent{
				width: 370px;
				display: flex;
				justify-content: space-between;
			}
			a{
				color: #fff;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="container"> <!-- 宽度，弹性布局-->
				<div class="leftContent"> <!-- 弹性布局 -->
					<div><a href="">设为首页</a></div>
					<div><a href="">手机新浪网</a></div>
					<div><a href="">移动客户端</a></div>
				</div>
				<div class="rightContent">
					<div><a href="">登录</a></div>
					<div><a href="">微博</a></div>
					<div><a href="">博客</a></div>
					<div><a href="">邮箱</a></div>
					<div><a href="">网站导航</a></div>
				</div>
			</div>
		</div>
		<div class="nav"></div>
		<div class="content">
			<div class="content1"></div>
			<div class="content2"></div>
			<div class="content3"></div>
			<div class="content4"></div>
		</div>
	</body>
</html>
